<template>
  <div class="cost-container">
    <div class="top">
      <div class="left">
        <el-input placeholder="請輸入成本名稱"></el-input>
        <el-select placeholder="全部來源" style="margin: 0 15px"></el-select>
        <el-select placeholder="全部類型"></el-select>
        <el-date-picker placeholder="年-月-日" style="margin-left: 15px"></el-date-picker>
        <div class="btn-list">
          <el-button type="primary">搜索</el-button>
          <el-button>重置</el-button>
        </div>
      </div>
      <div class="right">
        <el-button @click.native="addType">
          <svg-icon icon-class="white-add"></svg-icon>
          成本類型
        </el-button>
        <el-button @click.native="addSource">
          <svg-icon icon-class="white-add"></svg-icon>
          成本來源
        </el-button>
        <el-button type="primary" @click.native="addCost">
          <svg-icon icon-class="staff-add"></svg-icon>
          新建成本
        </el-button>
      </div>
    </div>
    <div class="cost-card">
      <small-card
        class="small-card"
        :title="item.title"
        :bg-color="item.bgColor"
        :end-val="item.endVal"
        :is-up="item.isUp"
        :prefix="item.prefix"
        :percent-num="item.percentNum"
        :icon-class="item.iconClass"
        v-for="(item, index) in costCardListData"
        :key="index"
      ></small-card>
    </div>
    <div class="chart-wrap br-20">
      <div class="chart-top">
        <div class="chart-top-left">成本趋势分析</div>
        <div class="chart-top-right">
          <span class="btn br-5 active">管理費用</span>
          <span class="btn br-5">人工成本</span>
          <span class="btn br-5">材料採購</span>
          <span class="btn br-5">其他費用</span>
        </div>
      </div>
      <div id="chart"></div>
    </div>
    <div class="table-wrap br-20">
      <h4>成本列表</h4>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="成本ID">
          <template>
            <div>QUOTE-2024-001</div>
          </template>
        </el-table-column>
        <el-table-column label="成本名稱">
          <template>
            <div class="text-1">XXXX科技公司</div>
          </template>
        </el-table-column>
        <el-table-column label="金額">
          <template>張三</template>
        </el-table-column>
        <el-table-column label="成本來源">
          <template>張三</template>
        </el-table-column>
        <el-table-column label="成本類型">
          <template>
            <span>2025-08-06</span>
          </template>
        </el-table-column>
        <el-table-column label="發生日期">
          <template>
            <span class="status success">已成交</span>
          </template>
        </el-table-column>
        <el-table-column label="負責人">
          <template>
            <span class="status success">已成交</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small" @click.native="costDetailVisible = true">檢視</el-button>
            <el-button type="text" size="small" @click.native="editCost">編輯</el-button>
            <el-button type="text" size="small">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog :title="editCostTitle" class="add-order-dialog" :visible.sync="addCostVisible" width="680px">
      <el-form :model="addCostFormData" label-position="top" inline>
        <div class="base-info">
          <h5>基本資訊</h5>
          <div class="base">
            <el-form-item label="成本名稱">
              <el-input v-model="addCostFormData.name" autocomplete="off" placeholder="請輸入成本名稱"></el-input>
            </el-form-item>
            <el-form-item label="成本ID">
              <el-input v-model="addCostFormData.name" autocomplete="off" placeholder="請輸入成本ID"></el-input>
            </el-form-item>
            <el-form-item label="金額">
              <el-input v-model="addCostFormData.name" autocomplete="off" placeholder="請輸入金額"></el-input>
            </el-form-item>
            <el-form-item label="成本來源">
              <el-select v-model="addCostFormData.name" placeholder="請選擇狀態">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="成本類型" style="flex: 2">
              <el-select v-model="addCostFormData.name" placeholder="請選擇成本類型">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="發生日期">
              <el-date-picker v-model="addCostFormData.name" type="date" placeholder="年-月-日"></el-date-picker>
            </el-form-item>
            <el-form-item label="負責人">
              <el-select v-model="addCostFormData.name" placeholder="請選擇負責人">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="備註" style="width: 100%">
              <el-input type="textarea" placeholder="請輸入備註信息"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrderVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddOrder">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="editCostTypeTitle" class="add-order-dialog" :visible.sync="addCostTypeVisible" width="680px">
      <el-form :model="addCostTypeFormData" label-position="top" inline>
        <div class="base-info">
          <h5>基本資訊</h5>
          <div class="base">
            <el-form-item label="成本名稱">
              <el-input v-model="addCostFormData.name" autocomplete="off" placeholder="請輸入成本名稱"></el-input>
            </el-form-item>
            <el-form-item label="關聯成本來源">
              <el-select v-model="addCostFormData.name" placeholder="請選擇">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="關聯財務科目" style="flex: 2">
              <el-select v-model="addCostFormData.name" placeholder="請選擇">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="備註" style="width: 100%">
              <el-input type="textarea" placeholder="請輸入備註信息"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrderVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddOrder">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog class="cost-detail-dialog" title="成本詳情" width="680px" :visible.sync="costDetailVisible">
      <div class="detail">
        <div class="detail-item">
          <span>訂單編號:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>訂單名稱:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>金額:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>訂單日期:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>狀態:</span>
          <span></span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="costDetailVisible = false">關閉</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SmallCard from '@/components/SmallCard/index.vue'
import * as echarts from 'echarts'

export default {
  name: 'cost-management',
  components: { SmallCard },
  data() {
    return {
      chart: null,
      tableData: [{}],
      costCardListData: [
        { title: '本月總成本', prefix: '￥', endVal: 125800, isUp: false, percentNum: 12, iconClass: 'cost-card-1' },
        { title: '固定成本', prefix: '￥', endVal: 58200, isUp: false, percentNum: 12, iconClass: 'cost-card-2' },
        { title: '可變成本', prefix: '￥', endVal: 67600, isUp: false, percentNum: 12, iconClass: 'cost-card-3' },
        { title: '成本節約', prefix: '￥', endVal: 8300, isUp: true, percentNum: 12, iconClass: 'cost-card-3' }
      ],
      addCostVisible: false,
      editCostTitle: '新建成本',
      addCostFormData: {},
      costDetailVisible: false
    }
  },
  mounted() {
    this.iniChart()
  },
  methods: {
    addCost() {
      this.addCostVisible = true
      this.editCostTitle = '新增成本'
    },
    submitAddOrder() {},
    iniChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
      this.chart.setOption({
        animationDuration: 3000,
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['總成本趨勢', '環比變化率']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2019', '2020', '2021', '2022', '2023', '2024', '2025']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: '總成本趨勢',
            type: 'line',
            stack: 'Total',
            smooth: true,
            itemStyle: {
              color: '#3C58FC'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '環比變化率',
            type: 'line',
            stack: 'Total',
            smooth: true,
            itemStyle: {
              color: '#36C062'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="less">
.cost-container {
  .top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .left {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .el-input {
        width: 232px;
      }
      .el-select {
        width: 168px;
      }
      .el-date-picker {
        width: 172px;
      }
      .btn-list {
        margin-left: 15px;
      }
    }
  }
  .cost-card {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .small-card {
      margin-right: 15px;
      //min-width: 300px;
      flex: auto;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .chart-wrap {
    padding: 25px 30px;
    background: #fff;
    height: 432px;
    box-sizing: border-box;
    margin-bottom: 20px;
    .chart-top {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      &-left {
        font-size: 18px;
        line-height: 25px;
        font-weight: bold;
      }
      &-right {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        span {
          padding: 7px 28px;
          color: #3c58fc;
          font-size: 14px;
          line-height: 20px;
          background: rgba(60, 88, 252, 0.07);
          cursor: pointer;
          margin-right: 12px;
          overflow: hidden;
          &:hover {
            background: rgba(108, 120, 255, 0.3);
          }
          &.active {
            background: #3c58fc;
            color: #fff;
          }
        }
      }
    }
    #chart {
      height: calc(100% - 34px);
    }
  }
  .table-wrap {
    background: #fff;
    padding: 25px 30px;
    h4 {
      font-size: 18px;
      line-height: 25px;
      margin: 0 0 25px 0;
    }
    .table-foot {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .cost-detail-dialog {
    .detail {
      background: rgba(60, 88, 252, 0.05);
      padding: 24px 26px;
      &-item {
        display: flex;
        justify-content: flex-start;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 23px;
      }
    }
  }
}
</style>
